<template>
    <view class="pd20">
        <view class="top">
            <u-tabs :list="screenList" @click="selectScreen"></u-tabs>
            <view class="tright">地区很长很长很长很长很长很长很长很长很长很长很长</view>
        </view>
        <view class="mgt10 mgb20">
            <u-search placeholder="搜索" v-model="keyword" animation></u-search>
            <view class="tagGroup">
                <view class="tag" v-for="i in 10" @click="changeInput(i)">{{ i }}</view>
            </view>
        </view>
        <view>
            <view class="fs40 fwb">{{ showName }}</view>
            <busCard />
            <busCard />
            <busCard />
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
const keyword = ref();
const screenList = reactive([{ name: '热门企业' }, { name: '热门工作' }]);
const showName = ref('热门企业');
const selectScreen = (item) => {
    showName.value = item.name;
};
const changeInput = (text) => {
    console.log(text);
    keyword.value = text;
};
</script>
<style lang="scss">
.top {
    @include flex-box();
    .tright {
        margin-left: 30rpx;
        @include ellipsis(1);
        font-size: 28rpx;
        font-weight: bold;
    }
}
.tagGroup {
    margin-top: 10rpx;
    display: flex;
    flex-wrap: wrap;
    .tag {
        @include flex-box-set();
        @include ellipsis(1);
        border: 1px solid #e3e3e3;
        border-radius: 8rpx;
        text-align: center;
        padding: 5rpx;
        font-size: 18rpx;
        margin: 10rpx;
        &:hover {
            background-color: #f7f7f7;
            color: #999;
        }
    }
}
</style>